<template>
  <div class="editUser">
    <header>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          :to="{ path: '/specialUserManage' }"
          class="homePage"
          >特殊用户管理</el-breadcrumb-item
        >
        <el-breadcrumb-item>编辑特殊用户</el-breadcrumb-item>
      </el-breadcrumb>
      <p>编辑特殊用户</p>
    </header>
    <main>
      <div class="userInfo">
        <desc-title :descTitle="'特殊用户信息'"></desc-title>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="168px"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名:" prop="name">
            <el-input
              v-model="ruleForm.name"
              clearable
              maxlength="10"
            ></el-input>
          </el-form-item>
          <el-form-item label="公司/单位:">
            <el-input v-model="ruleForm.company" clearable></el-input>
          </el-form-item>
          <el-form-item label="职位:" prop="position">
            <el-input
              v-model="ruleForm.position"
              clearable
              maxlength="10"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号:" prop="mobile">
            <el-input v-model="ruleForm.mobile" clearable></el-input>
          </el-form-item>
          <el-form-item label="邮箱:">
            <el-input v-model="ruleForm.email" clearable></el-input>
          </el-form-item>
          <el-form-item label="组织:" prop="webDeptId">
            <el-select v-model="ruleForm.webDeptId" placeholder="无" clearable>
              <el-option
                v-for="item in organizationList"
                :key="item.webDeptId"
                :value="item.webDeptId"
                :label="item.webDeptName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态:" prop="status">
            <el-select v-model="ruleForm.status" clearable>
              <el-option
                v-for="item in statusList"
                :key="item.id"
                :value="item.name"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <desc-title
          :descTitle="'关联项目'"
          desBtnName="添加"
          @desEvent="showAddProject"
        ></desc-title>
        <div class="tableList">
          <table cellspacing="0">
            <thead>
              <th>序号</th>
              <th>项目名称</th>
              <th>项目编号</th>
              <th>项目位置</th>
              <th>施工单位</th>
              <th>项目状态</th>
              <th>操作</th>
            </thead>
            <tbody v-show="ifShowBody">
              <tr
                v-for="(item, index) in ruleForm.projectInformationList"
                :key="item.projectId"
              >
                <td>{{ index >= 9 ? index + 1 : "0" + (index + 1) }}</td>
                <td>{{ item.projectName }}</td>
                <td>{{ item.projectNumber }}</td>
                <td>{{ item.projectAd }}</td>
                <td>{{ item.consUnit }}</td>
                <td
                  :class="[
                    item.projectCompletion === '监测中'
                      ? 'green'
                      : item.projectCompletion === '未监测'
                      ? 'yellow'
                      : ''
                  ]"
                >
                  {{ item.projectCompletion }}
                </td>
                <td>
                  <span @click="deleteProject(item.projectId)">删除</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="empty" v-show="!ifShowBody">
          <span>暂无项目</span>
          <span class="atlast">请添加至少一个关联项目</span>
        </div>
      </div>
    </main>
    <footer>
      <span class="sureEdit" @click="sureEdit('ruleForm')">确定</span>
    </footer>
    <addProject
      v-if="ifShowAddProject && $store.state.ifShowCover"
      :selectProject="ruleForm.projectInformationList"
      @getNewProject="getNewProject"
    ></addProject>
    <div class="getDown">
      <i class="el-icon-bottom"></i>
    </div>
  </div>
</template>

<script>
import { userInfo, updateUser } from '@/api/sysUserRole'
import { validTelephone } from '@/utils/validate'
import addProject from '../components/addProject'

export default {
  data () {
    const validPhone = (rule, value, callback) => {
      if (validTelephone(value)) {
        callback()
      } else {
        callback(new Error('请输入正确的手机号格式'))
      }
    }
    return {
      ruleForm: {},
      rules: {
        name: [
          { required: true, trigger: 'blur', message: '用户姓名不能为空' }
        ],
        mobile: [
          { required: true, trigger: 'blur', message: '手机号不能为空' },
          { validator: validPhone, trigger: 'blur' }
        ],
        webDeptId: [
          { required: true, trigger: 'change', message: '请选择组织' }
        ],
        status: [{ required: true, trigger: 'change', message: '请选择状态' }],
        position: [{ required: true, trigger: 'blur', message: '职务不能为空' }]
        // company: [
        //   { required: true, trigger: 'blur', message: '公司/单位不能为空' }
        // ],
        // email: [{ required: true, trigger: 'blur', message: '邮箱不能为空' }]
      },
      organizationList: [],
      statusList: [
        { id: 0, name: '禁用' },
        { id: 1, name: '启用' }
      ],
      ifShowAddProject: false
    }
  },
  components: {
    addProject
  },
  computed: {
    ifShowBody () {
      if (this.ruleForm.projectInformationList) {
        return this.ruleForm.projectInformationList.length
      } else {
        return false
      }
    },
    userId () {
      return sessionStorage.getItem('id')
    }
  },
  methods: {
    // 获取当前编辑的用户信息
    getUserInfo () {
      const userId = this.userId
      userInfo(userId).then(res => {
        const { data } = res
        if (data.data.status === 1) {
          data.data.status = '启用'
        } else {
          data.data.status = '禁用'
        }
        const ruleForm = {
          name: data.data.name,
          webDeptId: data.data.webDeptId,
          mobile: data.data.mobile,
          status: data.data.status,
          projectInformationList: data.data.projectInformationList,
          company: data.data.company,
          position: data.data.position,
          email: data.data.email
        }
        this.ruleForm = ruleForm
      })
    },
    // 获取组织列表
    getConsumerList () {
      const departSearchDTO = {
        index: 1,
        pageSize: 1000
      }
      this.$store
        .dispatch('userManage/getConsumerList', departSearchDTO)
        .then(res => {
          this.organizationList = res.data.data.data
        })
    },
    // 删除组织 不提交
    deleteProject (id) {
      this.ruleForm.projectInformationList = this.ruleForm.projectInformationList.filter(
        item => item.projectId !== id
      )
    },
    // 展示添加项目的弹窗
    showAddProject () {
      this.$store.commit('set_ifShowCover', true)
      this.ifShowAddProject = true
    },
    // 自定义事件 组件传值
    getNewProject (list) {
      this.ifShowAddProject = false
      this.$store.commit('set_ifShowCover', false)
      this.ruleForm.projectInformationList = [
        ...this.ruleForm.projectInformationList,
        ...list
      ]
    },
    // 确认编辑的点击事件
    sureEdit (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const projectIds = []
          this.ruleForm.projectInformationList.forEach(item => {
            projectIds.push(item.projectId)
          })
          if (projectIds.length === 0) {
            this.$message({
              type: 'error',
              message: '请至少添加一个关联项目'
            })
            return
          }
          const sysUserDTO = {
            name: this.ruleForm.name,
            mobile: this.ruleForm.mobile,
            webDeptId: this.ruleForm.webDeptId,
            status: this.ruleForm.status === '启用' ? 1 : 0,
            projectIds,
            departName: this.ruleForm.departName,
            company: this.ruleForm.company,
            position: this.ruleForm.position,
            email: this.ruleForm.email
          }
          updateUser(sysUserDTO, this.userId).then(res => {
            if (res.data.code === 200) {
              this.$router.push('/specialUserManage')
              this.$message({
                type: 'success',
                message: res.data.message
              })
            } else {
              this.$message({
                type: 'error',
                message: res.data.message
              })
            }
          })
        } else {
          return false
        }
      })
    }
  },
  created () {
    this.getUserInfo()
    this.getConsumerList()
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-form-item__label {
  width: 300px !important;
  text-align: right;
}
::v-deep .el-form-item__content {
  float: left;
}

.editUser {
  padding: 0 30px;
  header {
    height: 114px;

    .el-breadcrumb {
      height: 58px;
      line-height: 58px;
    }
    p {
      font-size: 24px;
      color: #333;
      font-weight: bold;
    }
  }
  main {
    padding: 0 30 30px;
    background-color: #fff;
    border-radius: 5px;
    min-height: calc(100% - 222px);
    .userInfo {
      p {
        font-size: 18px;
        color: #333;
        vertical-align: middle;
        position: relative;
        span {
          display: inline-block;
          border-left: 4px solid #4868ff;
          height: 18px;
          vertical-align: middle;
        }
        i {
          font-style: normal;
          position: absolute;
          right: 0;
          width: 84px;
          height: 36px;
          border-radius: 18px;
          background-color: #4868ff;
          text-align: center;
          line-height: 36px;
          color: #fff;
          font-size: 14px;
          cursor: pointer;
        }
      }
      .el-form {
        .el-input {
          width: 400px;
        }

        .el-select {
          width: 400px;
        }
      }
    }

    table {
      width: 100%;
      thead {
        th {
          background-color: rgba(87, 131, 255, 0.05);
          height: 60px;
          font-weight: normal;
          font-size: 14px;
          color: #333333;
          border-bottom: 1px solid #e6e6e6;
          text-align: left;
          padding-left: 24px;
        }
      }

      tbody {
        tr {
          td {
            color: #666666;
            font-size: 14px;
            text-align: left;
            padding-left: 24px;
            height: 60px;
            border-bottom: 1px solid #e6e6e6;
            span {
              color: #fb4646;
              text-decoration: underline;
              cursor: pointer;
            }
          }
          .green {
            color: #2ebb25;
          }
          .yellow {
            color: #ffb415;
          }
        }
      }
    }

    .empty {
      height: 64px;
      text-align: center;
      border-bottom: 1px solid #f2f2f2;
      position: relative;

      span {
        line-height: 64px;
        color: #666;
        font-size: 14px;
      }

      .atlast {
        position: absolute;
        bottom: -50px;
        left: 270px;
        font-size: 12px;
        color: #ff2b2b;
      }
    }
  }

  footer {
    background-color: #fff;
    padding-left: 300px;
    padding-top: 65px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    .sureEdit {
      width: 172px;
      height: 48px;
      line-height: 48px;
      color: #fff;
      background-color: #4868ff;
      border-radius: 24px;
      display: inline-block;
      text-align: center;
      cursor: pointer;
      font-size: 18px;
    }
  }
  .addProject {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  .tableList{
    margin-top: 24px;
    max-height: 500px;
    overflow: auto;
    &::-webkit-scrollbar{
      width: 10px;
    }
    &::-webkit-scrollbar-thumb{
      background-color: #ccc;
      border: 1px solid #ccc;
      border-radius: 10px;
    }
  }
  .getDown {
    position: fixed;
    right: 50px;
    background-color: #000;
    color: #fff;
    display: none;
  }
}
</style>
